<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>homeEmp</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <h3 id="stuInfo_title">员工信息管理系统</h3>
    <table border="1" id="empInfo_tab" cellpadding="0" cellspacing="0">
        <tr>
            <td colspan="3">
                <a href="javascript:void(0)" id="empInfo_add">添加职员</a>
                <a href="javascript:void(0)" id="empInfo_addClass">添加部门</a>
            </td>

        </tr>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>薪资</th>
            <th>所属部门</th>
            <th>操作</th>
        </tr>
    </table>
    <div class="fade"></div>
    <div id="loadAddEmpInfoTab"></div>
    <div id="loadAddDepartmTab"></div>
    <div id="loadAlterEmpInfoTab"></div>
</body>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
    $(function () {
        //页面一加载，显示员工信息列表
        loadStudentList();
        function loadStudentList(){
            $.ajax({
                url : "findAllEmp",
                success : function (data) {
                    if(data.code == 200){
                        prefectEmpInfoTab(data.data);
                    }else if(data.code = 500){
                        alert(data.message);
                    }
                }
            });
            $("#empInfo_query").find("option:not(:first)").remove();
            prefectDepartmSelect("#empInfo_query");
        }

        //完善职员信息系统表
        function prefectEmpInfoTab(dataList){
            $("#empInfo_tab tr:not(:first):not(:nth-child(2))").remove();
            $.each(dataList, function (index, obj) {
                $("#empInfo_tab").append(
                    "<tr>"+
                        "<td>"+obj.EMP_ID+"</td>"+
                        "<td>"+obj.EMP_NAME+"</td>"+
                        "<td>"+(obj.EMP_SEX ==1 ? "男" : "女")+"</td>"+
                        "<td>"+obj.EMP_NUM+"</td>"+
                        "<td>"+obj.EMP_ADDRESS+"</td>"+
                        "<td>"+obj.Departm_NAME+"</td>"+
                        "<td><a href='javascript:void(0)' class='empInfo_update'>修改</a> | <a href='javascript:void(0)' class='stuInfo_delete'>删除</a></td>"+
                    "</tr>"
                );
            });
            removeStudentInfo($(".stuInfo_delete"));
            alterStudentInfo($(".stuInfo_update"));
        }

        //根据学号删除学生信息
        function removeStudentInfo(list){
            $.each(list, function (index, obj) {
                $(obj).on("click", function () {
                    var stuid = $(obj).parent().parent().find("td:first-child").text();
                    $.ajax({
                        url : "removeStudentInfo",
                        data : "stuid="+stuid,
                        success : function (data) {
                            alertMessage(data);
                        }
                    });
                });
            });
        }


        //添加学生信息
        addStudentInfo();
        function addStudentInfo(){
            $("#stuInfo_add").on("click", function () {
               alertMask();
               $("#loadAddStudentInfoTab").load("addStudentInfo.html .succ-pop-addStudentInfo", function () {
                   $(".succ-pop-addStudentInfo").css("display", "block");
                    prefectClassInfoSelect("#selectClass");
                    addStudentCommit();
               });
            });
        }

        //提交信息
        function  addStudentCommit() {
            $("#addStudentInfo_commit").on("click", function () {
                var params = $("#addStudentInfoFrm").serialize();
                $.ajax({
                    url : "addStudentInfo",
                    data : params,
                    success : function (data) {
                        alertMessage(data);
                        loadStudentList();
                    }
                });
            });
        }

        //完善部门下拉列表选项
        function prefectClassInfoSelect(selector){
            $.ajax({
                url : "findAllClassInfo",
                success : function (data) {
                    if(data.code == 200){
                        $.each(data.data, function(index, obj){
                            $(selector).append(
                                "<option value='"+obj.classId+"' class='ClassOptions'>"+obj.className+"</option>"
                            );
                        });
                    }
                }
            });
        }

        //添加班级信息
        addClassInfo();
        function addClassInfo(){
            $("#stuInfo_addClass").on("click", function(){
                alertMask();
                $("#loadAddStudentInfoTab").load("addClassInfo.html .succ-pop-addClassInfo", function () {
                    $(".succ-pop-addClassInfo").css("display", "block");
                    $("#addClassInfo_commit").on("click", function () {
                        var params = $("#addClassInfoFrm").serialize();
                        $.ajax({
                            url : "addClassInfo",
                            data : params,
                            success : function (data) {
                                alertMessage(data);
                                loadStudentList();
                            }
                        });
                    });
                });
            });
        }

        //修改学生信息
        function alterStudentInfo(list){
            $.each(list, function (index, obj) {
                $(obj).on("click", function () {
                    var stuid = $(obj).parent().parent().find("td:first-child").text();
                    $("#loadAlterStudentInfoTab").load("alterStudentInfo.html .succ-pop-alterStudentInfo", function () {
                        insertStudentInfoIntoAlterTab(stuid);
                        alertMask();
                        $(".succ-pop-alterStudentInfo").css("display", "block");
                        alterStudentInfoCommit();
                    });
                });
            });
        }

        function insertStudentInfoIntoAlterTab(stuid){
            $.ajax({
                url : "findCompleteStudentInfoById",
                data : "stuid="+stuid,
                success : function (data) {
                    $("#alterStuInfo_stuid").val(data.data.STU_ID);
                    $("#alterStuInfo_stuname").val(data.data.STU_NAME);
                    $.each($(".alterStuInfo_sex"), function (index, obj) {
                        if($(obj).val() == data.data.STU_SEX){
                            $(obj).attr("checked", "checked");
                        }
                    });
                    $("#alterStuInfo_cardNum").val(data.data.CARD_NUM);
                    $("#alterStuInfo_address").val(data.data.STU_ADDRESS);
                    prefectClassInfoSelect();
                }
            });
        }

        function alterStudentInfoCommit(){
            $("#alterStudentInfo_commit").on("click", function () {
                var params = $("#alterStudentInfoFrm").serialize();
                $.ajax({
                    url : "alterStudentInfo",
                    data : params,
                    success : function (data) {
                        alertMessage(data);
                        loadStudentList();
                    }
                });
            });
        }

        //按条件查询
        matchClass();
        function matchClass(){
            $("#stuInfo_query").on("change", function () {
                var classId = $("#stuInfo_query").val();
                if(classId == ""){
                    loadStudentList();
                }else{
                    loadMatchClass(classId);
                }
            });
        }

        function loadMatchClass(classId){
            $.ajax({
                url : "matchClass",
                data : "classId="+classId,
                success : function (data) {
                    prefectStuInfoTab(data.data);
                }
            });
        }

        function alertMessage(data){
            if(data.code == 200){
                alert(data.message);
                loadStudentList();
            }else if(data.code == 500){
                alert(data.message);
            }
        }

        //弹出遮罩层
        function alertMask(){
            $(".fade").css("display", "block");
        }

        //关闭遮罩层
        function closeMask(){
            $(".fade").css("display", "none");
        }
    });
</script>
</html>